<template>
    <div class="con">
        <div class="title">
            <p v-show="show">尚未添加支付宝</p>
            <p v-show="!show">
                <img src="../../assets/images/home/zfb.png" alt="">
                {{accountNo}}</p>
        </div>

        <div class="money">
            <p>收款金额</p>
            <div class="rmb">
                <img src="../../assets//images/home/rmb.png" alt />
                <input type="number" placeholder="请输入收款金额" v-model="money" />
            </div>
        </div>
        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>
        <div class="tip">
            <p>生成二维码展示给买家付款</p>
        </div>

        <!-- 弹框  透明背景-->
        <div class="bg" v-show="show"></div>
        <div class="tk" v-show="show">
            <h3>请先添加支付宝账号</h3>

            <div class="tkbtn">
                <div class="tkbtn1" @click="cancel()">暂不</div>
                <div class="tkbtn2" @click="add()">添加</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "qrcode",
    data() {
        return {
            timestamp: "",
            show: false,
            accountNo:"",
            money:""
        };
    },

    methods: {
        cancel() {
            // 回到首页
            this.$router.push({ name: "home" });
        },
        add() {
            this.$router.replace({ name: "addalipay"});
        },
        ok(){
            if(this.money==""){
                this.$toast("请输入收款金额")
            }else{

                this.$toast("该支付宝账号暂未开通收款权限")
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());

        this.axios({
            method: "post",
            url: `${this.siteUrl}/app/account/repay/getLastCredit?appid=web.2019&format=json&timestamp=${this.timestamp}`,
            data: {
                userId: localStorage.getItem("userId"),
                type: 2
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    if (response.data.data.accountNo == "") {
                        this.show = true;
                    }else{
                        this.accountNo=response.data.data.accountNo;
                        
                    }
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
}

.title p {
    line-height: 60px;
    text-align: center;
    color: #999;
}
.title img{
    width: 20px;
    vertical-align: middle

}
.money {
    width: 100%;
    height: 114px;
    background: #fff;
}
.money p {
    line-height: 50px;
    color: #333;
    text-indent: 15px;
}
.money .rmb {
    position: relative;
}
.money .rmb img {
    position: absolute;
    width: 24px;
    left: 15px;
    top: 18px;
}
.money input {
    height: 60px;
    width: 100%;
    font-size: 28px;
    text-indent: 50px;
}
input::-webkit-input-placeholder {
    color: #cdd0da;
    font-size: 28px;
}

.btn {
    width: 70%;
    margin: 36px auto 24px;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
.tip p {
    color: #999999;
    font-size: 14px;
    font-weight: 200;
    text-align: center;
}

/* 注册弹框 */
.bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /*  利用CSS透明效果*/
    position: fixed;
    /* 固定在浏览器里*/
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.tk {
    width: 80%;
    height: 130px;
    background: white;
    position: fixed;
    top: 30%;
    left: 10%;
    z-index: 99999;
    overflow: hidden;
    border-radius: 7px;
}
.tk h3 {
    text-align: center;
    line-height: 70px;
    font-size: 16px;
    font-weight: 200;
}

.tk .tkbtn {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border-top: 1px solid #f2f2f2;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    font-weight: 200;
}
.tk .tkbtn1 {
    float: left;
    width: 50%;
    color: #a6a9b5;
}
.tk .tkbtn2 {
    float: left;
    width: 50%;
    color: #ffae4e;
}
</style>
